<template>
	<footer>
		<ul>
			<li v-for="i in data" @click='change(i.to)'>
				<router-link :to="i.to" class='icon'>
					<div>	
					</div>
					<div>{{i.font}}</div>
				</router-link>
			</li>
		</ul>
	</footer>
</template>
<style scoped>
	footer{
		position: fixed;
		bottom: 0;
		width:100%;
		height: 2.133333rem;
		background: white;
		z-index: 99;
	}
	ul{
		display: flex;
	}
	li{
		width: 25%;
		text-align: center;
		height: 2.133333rem;
	}
	.icon div:first-of-type{
		height: 0.666667rem;
		width:0.666667rem;
		margin: 0.266667rem auto 0.133333rem auto;
		
	}
	li:first-of-type>.icon>div:first-of-type{
		background: url(./img/资讯.png);
		background-size:100%; 
	}
	 li:nth-of-type(2)>.icon>div:first-of-type{
		background: url(./img/直播.png);
		background-size:100%; 
	}
	 li:nth-of-type(3)>.icon>div:first-of-type{
		background: url(./img/圈子1.png);
		background-size:100%; 
	}
	 li:nth-of-type(4)>.icon>div:first-of-type{
		background: url(./img/数据.png);
		background-size:100%; 
	}  
	.router-link-active{
		color:green;
	}
	li:first-of-type>.router-link-active>div:first-of-type{
		background: url(./img/a.png);
		background-size:100%;
	}
	li:nth-of-type(2)>.router-link-active>div:first-of-type{
		background: url(./img/b.png);
		background-size:100%;
	}
	li:nth-of-type(3)>.router-link-active>div:first-of-type{
		background: url(./img/4.png);
		background-size:100%;
	}
	li:nth-of-type(4)>.router-link-active>div:first-of-type{
		background: url(./img/3.png);
		background-size:100%;
	}
	.icon{
		display: block;
		width: 100%;
		height:2.133333rem;
	}
</style>
<script>
	export default {
		data(){
			return {
				data:[
					{
						font:'首页',
						to:'news'
					},{
						font:'直播',
						to:'read'
					},{
						font:'圈子',
						to:'media'
					},{
						font:'数据',
						to:'person'
					}
				]
			}
		},
		methods:{
			change(path){
				this.$store.dispatch('requestNav',{
					path: path,
					a: this
				});
			}
		},
		mounted(){
			this.change('person');
		}
	}
</script>